<template>
	<view >
	
		  <view >
		  	<u-tabs
			 class="fixed"
		  	name="cate_name_home"
		  	barWidth="120"
		  	:list="listtask" 
		  	:current="currenttask" 
		  	@change="tabsChange"></u-tabs>
		  	
		  </view>
		<view style="padding-top: 75rpx;">
			<scroll-view scroll-y="true"  :style="{height:currentHeight+'px'}">
				<view>
					<view class="" v-show="currenttask==0" v-for="(item,index) in tabs" :key="index">
						<taskCard2 :item="item"></taskCard2>
					</view>
					<view class="my30">
						<u-loadmore :status="status" :load-text="loadText"/>
					</view>
				</view>
				
			</scroll-view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		name: "task",
		props:{
			currentHeight:{
				type:Number,
				default:0
			},
		},
		data() {
			return {
				loadText: {
									loadmore: '轻轻上拉',
									loading: '努力加载中',
									nomore: '没有更多了'
								},
				status: 'nomore',//nomore
				tabs: [{
					title: "美工",
					company: "河南中原人力",
					detail: "要求会PS AI C4D",
					commission: "根据实际情况计算工资",
					startDate: "2021-04-13 14:58:58"
				}, {
					title: "美工",
					company: "河南中原人力",
					detail: "要求会PS AI C4D",
					commission: "根据实际情况计算工资",
					startDate: "2021-04-13 14:58:58"
				}, {
					title: "美工",
					company: "河南中原人力",
					detail: "要求会PS AI C4D",
					commission: "根据实际情况计算工资",
					startDate: "2021-04-13 14:58:58"
				}, {
					title: "美工",
					company: "河南中原人力",
					detail: "要求会PS AI C4D",
					commission: "根据实际情况计算工资",
					startDate: "2021-04-13 14:58:58"
				}],
				listtask: [{
					name: '全部'
				}, {
					name: '待确认'
				}, {
					name: '执行中'
				}, {
					name: '结算中'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				currenttask: 0, // tabs组件的current值，表示当前活动的tab选项
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.currenttask = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>
<style lang="scss" scoped>
	.fixed{
		position: fixed;
		z-index: 998;
		left: 0;
		top: 130rpx;
		height: 60rpx;
		right: 0;
		background-color: #BD2C00;
	}
</style>
